

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';


    var image = React.createClass({

        getDefaultProps: function () {
            return {
                showIconImage: {
                    name: "大哥，文件呢？",
                    src: false,
                    status: "loading",
                    showTop: true
                }
            };
        },
        getInitialState: function () {
            return {
                showTop: true
            }
        },//Updating
        componentWillMount: function () {
            //console.log("渲染一次")
            this.setState({
                showTop: this.props.showIconImage.showTop
            })
        },
        handleChange: function (event) {
            //console.log("失去焦点")
        },
        handleBlur: function () {
            //console.log("失去焦点")
            this.props.handleBlur(this.state.value)
        },
        handleOn: function () {
            this.props.showIconImage.status == "done" && this.setState({
                showTop: true
            })
        },
        handleLeave: function () {
            this.props.showIconImage.status == "done" && this.setState({
                showTop: false
            })
        },
        remomveFile: function () {

            this.props.removeFile(this.props.showIconImage);
            /* var showIconImage = this.props.getState("showIconImage");

             //console.log("删除一个对象")
             this.props.uploader.removeFile(this.props.showIconImage.id);
             delete showIconImage[this.props.showIconImage.id];
             this.props.changState({
             "showIconImage":showIconImage
             })*/
        },
        render: function () {
            var css = "show-title " + (this.state.showTop ? "" : "hide");
            var showName = this.props.showIconImage.name.substr(0, 3) + "...";
            return (
                <div className="picture-show" onMouseOver={this.handleOn} onMouseLeave={this.handleLeave}>
                    <div className="show-image">
                        {(() => {
                            if (this.props.showIconImage.src) {
                                return (
                                    <img src={this.props.showIconImage.src}/>
                                )
                            } else {
                                return (
                                    <span className="center-middle">不能预览</span>
                                )
                            }
                        })()}
                    </div>
                    {(() => {
                        if (this.state.showTop) {
                            return (
                                <div className={css}>
                                    {(() => {
                                        if (this.props.showIconImage.status == "loading") {
                                            return (
                                                "上传中..."
                                            )
                                        } else if (this.props.showIconImage.status == "done") {
                                            return (
                                                <div className="temp">
                                                    <span className="icon-del-img-none"></span>{showName}<span className="icon icon icon-del-img"
                                                                                                               onClick={this.remomveFile}></span>
                                                </div>
                                            )
                                        } else {
                                            return (
                                                <div className="temp">
                                                    <span className="icon-del-img-none"></span>O(∩_∩)O<span className="icon icon icon-del-img"></span>
                                                </div>
                                            )
                                        }
                                    })()}
                                </div>

                            )
                        }
                    })()}
                    {(() => {
                        if (this.props.showIconImage.status != "done") {
                            return (
                                <div className="show-mark"></div>
                            )
                        }
                    })()}
                </div>
            )
        }
    })


    module.exports =  {
        IMAGE: image
    }

/*
 <div className="temp">完成<span className="icon icon icon-del-img"></span>
 </div>
 */

/* <div className="from-in-picture">  
 <div className="picture-show">
 <div className="show-image"><img src="/images/001.png"/></div>
 <div className="show-title">上传中...</div>
 <div className="show-mark"></div>
 </div>
 <div className="picture-show">
 <div className="show-image"><img src="/images/001.png"/></div>
 <div className="show-title"><span className="icon-del-img-none"></span>完成<span className="icon icon icon-del-img"></span></div>
 <div className="show-mark"></div>
 </div>
 <div className="picture-show">
 <div className="show-image"><img src="/images/001.png"/></div>
 </div>
 <div className="picture-show">
 <div className="show-image"><span className="center-middle">不能预览</span></div>
 </div>
 <div className="picture-add icon" id="uploader">
 </div>
 </div>  */